<style scoped>
.edit .el-form {
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 20px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.edit >>> .el-select {
  width: 100%;
}
</style>
<template>
  <div class="edit">
    <!-- 标题 -->
    <ywg-title></ywg-title>
    <!-- 表单 -->
    <el-form :model="form" ref="form">
      <el-form-item label="文章标题" :label-width="formLabelWidth">
        <el-input
          v-model="form.title"
          maxlength="10"
          show-word-limit
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章类型" :label-width="formLabelWidth">
        <el-select v-model="form.type" placeholder="请选择文章类型">
          <template v-for="item in $store.state.base.typeList">
            <el-option
              v-if="item.publish"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input
          type="textarea"
          maxlength="300"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 10 }"
          placeholder="请输入内容"
          v-model="form.content"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="count>1?false:true" >立即保存</el-button>
        <el-button @click="$router.go(-1)">返回列表</el-button>
      </el-form-item>
    </el-form>
    <!-- 离开弹框 -->
    <el-dialog title="未保存提示" :visible.sync="dialogVisible" width="30%">
      <span style="display: block; font-size: 16px; text-align: center"
        >有部分配置变更尚未保存，<br />
        确定要离开当前页面吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="goUp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ywgTitle from "./common/title";
export default {
  data: () => ({
    formLabelWidth: "120px",
    form: {
      title: "",
      type: "",
      content: "",
    },
    count: 0, //更改了就加加
    status: false, //点击返回状态
    dialogVisible: false, //离开弹框激活
  }),
  created() {
    try {
      let obj = this.$route.params;
      this.form = {
        ...obj,
        type: obj.type._id,
      };
    } catch {
      this.$router.go(-1);
    }
  },
  watch: {
    form: {
      handler(val) {
        if (val) {
          this.count++;
        }
      },
      deep: true,
    },
  },
  methods: {
    //   保存提交
      onSubmit(){
          let obj = JSON.parse(JSON.stringify(this.form));
          let {title,type,content,_id} = obj;
          console.log(title,type,content,_id);
          this.$http.post('article/write',{title,type,content,_id}).then((data)=>{
            console.log(data.data);
            if(data.data.code == 0){
               this.$message({
                message: data.data.msg,
                type: 'success'
              });
              // 禁用保存按钮
              this.count = 0;
            }else{
              this.$message({
                message: data.data.msg,
                type: 'warning'
              });
            }
          })
      },
    goUp() {
      this.dialogVisible = false;
      this.status = false;
      this.count = 0;
      this.$router.go(-1);
    },
  },
  mounted() {
    window.onbeforeunload = function (e) {
      e = e || window.event;
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
        e.returnValue = "关闭提示";
      }
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return "关闭提示";
    };
  },
  beforeRouteLeave(to, from, next) {
    // 判断数据是否修改，如果修改按这个执行，没修改，则直接执行离开此页面
    if (this.count > 1) {
      if (this.status) {
        next();
        return;
        // window.onbeforeunload = null; 
      }
      // 弹窗显示
      this.dialogVisible = true;
      next(false);
    } else {
      next();
      window.onbeforeunload = null; 
    }
  },
  components: {
    ywgTitle,
  },
};
</script>